<template>
    <view class="container">
        <!-- 顶部选项卡 -->
        <view class="swiper-tab dis-flex box-align-center flex-y-center">
            <block v-for="(item, index) in tabList" :key="index">
                <view :class="'swiper-tab-item ' + (dataType == item.value ? 'on' : '')" :data-current="item.value" @tap="swichNav">{{ item.text }}</view>
            </block>
        </view>
        <!-- 订单列表 -->
        <scroll-view :scroll-y="true" @scrolltolower="triggerDownLoad" :style="'height: ' + swiperHeight + 'px;'">
            <view class="widget-list b-f" v-if="list.length">
                <view class="widget__detail" v-for="(item, index) in list" :key="index">
                    <view class="detail__row dis-flex flex-x-between">
                        <view class="detail__left f-24">订单号：{{ item.order_no }}</view>
                        <view class="detail__right f-24 c-violet">
                            <block v-if="item.pay_status.value == 10">
                                {{ item.pay_status.text }}
                            </block>
                            <block v-if="item.pay_status.value == 20 && item.delivery_status.value == 10">
                                {{ item.delivery_status.text }}
                            </block>
                            <block v-if="item.pay_status.value == 20 && item.delivery_status.value == 20 && item.receipt_status.value == 10">
                                {{ item.receipt_status.text }}
                            </block>
                            <block v-if="item.order_status.value == 30">
                                {{ item.order_status.text }}
                            </block>
                        </view>
                    </view>

                    <view class="detail__row m-top10 dis-flex flex-x-between">
                        <view class="detail__left dis-flex flex-y-center">
                            <view class="user-info dis-flex flex-dir-column flex-x-center">
                                <view class="user-nickName f-28">{{ item.buyer_remark }}</view>
                                <view class="user-time f-24 c-80">消费金额：￥{{ item.pay_price }}</view>
                            </view>
                        </view>
                        <view class="detail__right dis-flex flex-dir-column flex-x-center flex-y-center">
                            <view class="detail__money t-r col-m">
                                <text class="f-26">+{{ item.update_price.value }}</text>
                                <text class="f-28" v-if="item.first_user_id == user_id">{{ item.first_money }}</text>
                                <text class="f-28" v-if="item.second_user_id == user_id">{{ item.second_money }}</text>
                                <text class="f-28" v-if="item.third_user_id == user_id">{{ item.third_money }}</text>
                            </view>
                            <view class="detail__time f-22 c-80">{{ item.create_time }}</view>
                        </view>
                    </view>
                </view>
                <!-- 没有更多 -->
                <view v-if="list.data.length && !isLoading && no_more" class="no-more f-30">亲, 没有更多了</view>
            </view>
            <!-- 没有记录 -->
            <view class="yoshop-notcont" v-if="!list.data.length && !isLoading">
                <text class="iconfont icon-wushuju"></text>
                <text class="cont">亲，暂无订单记录哦</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            isLoading: true,
            dataType: -1,
            page: 1,
            no_more: false,
            swiperHeight: '',

            list: {
                data: []
            },

            tabList: [],
            user_id: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 设置swiper的高度
        this.setSwiperHeight();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取订单列表
        this.getOrderList();
    },
    methods: {
        /**
         * 获取订单列表
         */
        getOrderList: function (isNextPage, page) {
            let that = this;
            app.globalData._get(
                'agent/lists',
                {
                    settled: that.dataType,
                    page: page || 1
                },
                function (result) {
                    // 创建页面数据
                    that.setData(that.createData(result.data, isNextPage));
                }
            );
        },

        /**
         * 创建页面数据
         */
        createData: function (data, isNextPage) {
            data['isLoading'] = false;
            // 列表数据
            let dataList = this.list;
            if (isNextPage == true && typeof dataList !== 'undefined') {
                data.list.data = dataList.data.concat(data.list.data);
            }
            // 设置当前页面标题
            uni.setNavigationBarTitle({
                title: data.words.order.title.value
            });
            // 当前用户id
            data['user_id'] = app.globalData.getUserId();
            // 导航栏数据
            data['tabList'] = [
                {
                    value: -1,
                    text: data.words.order.words.all.value
                },
                {
                    value: 10,
                    text: data.words.order.words.unsettled.value
                },
                {
                    value: 30,
                    text: data.words.order.words.settled.value
                }
            ];
            return data;
        },

        /**
         * 设置swiper的高度
         */
        setSwiperHeight: function () {
            // 获取系统信息(拿到屏幕宽度)
            let systemInfo = uni.getSystemInfoSync();
            let rpx = systemInfo.windowWidth / 750;
            let // 计算rpx
                tapHeight = Math.floor(rpx * 82);
            let // tap高度
                swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
            this.setData({
                swiperHeight
            });
        },

        /**
         * 点击tab切换
         */
        swichNav: function (e) {
            let that = this;
            that.setData(
                {
                    dataType: e.target.dataset.current,
                    list: {},
                    page: 1,
                    no_more: false,
                    isLoading: true
                },
                function () {
                    // 获取订单列表
                    that.getOrderList();
                }
            );
        },

        /**
         * 下拉到底加载数据
         */
        triggerDownLoad: function () {
            // 已经是最后一页
            if (this.page >= this.list.last_page) {
                this.setData({
                    no_more: true
                });
                return false;
            }
            // 获取订单列表
            this.getOrderList(true, ++this.page);
        }
    }
};
</script>
<style>
@import './order.css';
</style>
